<div class="ui raised segment tabs">
    <div class="ui labeled input" ng-show='isRoot'>
        <div class="ui label">Style</div>
        <input type="text" ng-model="css" />
    </div>
<div class="ui form segment">

    
<div class="ui menu">

    
        
    <a class="item">Link</a>
    <div class="ui pointing dropdown link item"  sem-dropdown>
        <i class="dropdown icon"></i>
        <span class="text">Color</span>

        <div class="menu" tabindex="-1">
            <div class="item" data-value="teal" >Teal</div>
            <div class="item" data-value="red" data-text="color red" >Red</div>
        </div>
    </div>

    <a class="browse item">
        <i class="dropdown icon"></i>
        Styles
    </a>
    <div class="ui flowing popup">
        <div class="ui four column relaxing equal height divided grid">
            <div class="ui column">
                
                <select size='50%' ng-init="colors = ['red', 'blue']" ng-options='color for color in colors' ng-model='color' chosen='colors' style='width:300px'> </select>
            </div>
            <div class="ui column">
                <h3>Style</h3>
                <div class="ui link list">
<div class="field"> 
   <div class="ui toggle checkbox" sem-checkbox ng-model="pointing" >
  <input type="checkbox">
  <label>Pointing</label>
</div>
  </div>


<div class="field"> 
  <checkbox type='toggle' ng-model='pointing'> Pointing </checkbox>
</div>

<div class="field" > 
    <select size='50%' ng-init="colors = ['red', 'blue']" ng-options='color for color in colors' ng-model='color' chosen='colors' style='width:300px'> </select>
</div>
  <checkbox type='toggle' ng-model='blue'> Blue </checkbox>
  <checkbox type='toggle' ng-model='red'>Red</checkbox>

                </div>
            </div>
            <div class="ui column">
                <h3>Theme</h3>
                <div class="ui link list">
                    <input  class="item" type="checkbox" ng-model='pointing'/> pointing 
                    <input  class="item" type="checkbox" ng-model='red' ng-value='!blue'/> red 
                    <input  class="item" type="checkbox" ng-model='blue'/> blue
                </div>
            </div>
        </div>

    </div>

</div>

style: [[pointed]] , [[color]]
        
    </div>
    <!-- 
    <div  class="ui top attached tabular menu">
    -->
    <div ng-class="{ui:'ui', menu:'menu', pointing: pointing, red:red, blue:blue, two:col-two, three:col-three}" >
        <a  ng-repeat='tab in tabs' class='ui item ' data-tab='[[tab.uuid]]' tab-item='tab.uuid' >[[tab.title]]</a>
    </div>

    <div class="">
        
    </div>
    <div ng-transclude></div>

<script type="text/javascript" charset="utf-8">
    $('.tabs .menu .browse')
      .popup({
        inline   : true,
        hoverable: true,
        position : 'bottom left',
        delay: {
          show: 300,
          hide: 300
        }
      })
    ;
</script>

</div>
